<template>
  <div>
    <div class="goods">
      <!-- tabs -->
      <div class="goods_top">
        <ul class="goodes_top_ul">
          <li><a href="">服装城</a></li>
          <li><a href="">美妆馆</a></li>
          <li><a href="">黑马超市</a></li>
          <li><a href="">全球购</a></li>
          <li><a href="">闪购</a></li>
          <li><a href="">团购</a></li>
          <li><a href="">有趣</a></li>
          <li><a href="">秒杀</a></li>
        </ul>
      </div>

      <!-- main -->

     <div class="goods_line"></div>
      <!-- aside -->
      <div style="display: flex; justify-content: center">
        <div class="goods_aside">
          <ul class="goods_aside_ul">
            <li><a href=""> 图书、音像、数字商品</a></li>
            <li><a href="">家用电器</a></li>
            <li><a href="">手机、数码</a></li>
            <li><a href="">电脑、办公</a></li>
            <li><a href="">家居、家具、家装、厨具</a></li>
            <li><a href="">服饰内衣</a></li>
            <li><a href="">个户化妆</a></li>
            <li><a href="">运动健康</a></li>
            <li><a href="">汽车用品</a></li>
            <li><a href="">彩票旅行</a></li>
            <li><a href="">理财、众筹</a></li>
            <li><a href="">母婴、玩具</a></li>
            <li><a href="">箱包</a></li>
            <li><a href="">运动户外</a></li>
            <li><a href="">老油条</a></li>
          </ul>
        </div>

        <!-- 轮播图main -->

        <div class="goods_main">
          <el-carousel
            class="goods_main_el-carousel"
            :interval="3000"
            autoplay
            height="450px"
          >
            <el-carousel-item v-for="(item, index) in banners" :key="index">
              <div class="carousel-image-container">
                <img :src="item" alt="" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- right -->
        <div class="goods_right">
          <div style="border: 1px solid #ccc; width: 248px; height: 180px">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 90%;
                padding-left: 5%;
                border-bottom: 1px solid #ccc;
                height: 40px;
              "
            >
              <h4>黑马快报</h4>
              <div style="display: flex; align-items: center">
                <span style="font-size: 14px">更多 </span>
                <i class="el-icon-arrow-right" style="font-size: 12px"></i>
              </div>
            </div>

            <!-- 内容 -->
            <div style="padding-left: 15px">
              <div
                style="
                  display: flex;
                  align-items: center;
                  height: 10px;
                  padding-top: 15px;
                "
              >
                <h4 style="font-size: 12px">[特惠]</h4>
                <span style="font-size: 12px; padding-left: 5px"
                  >备战开学季 全民半价购数码</span
                >
              </div>

              <div
                style="
                  display: flex;
                  align-items: center;
                  height: 10px;
                  padding-top: 15px;
                "
              >
                <h4 style="font-size: 12px">[公告]</h4>
                <span style="font-size: 12px; padding-left: 5px"
                  >备战开学季 全民半价购数码</span
                >
              </div>

              <div
                style="
                  display: flex;
                  align-items: center;
                  height: 10px;
                  padding-top: 15px;
                "
              >
                <h4 style="font-size: 12px">[特惠]</h4>
                <span style="font-size: 12px; padding-left: 5px"
                  >备战开学季 全民半价购数码</span
                >
              </div>

              <div
                style="
                  display: flex;
                  align-items: center;
                  height: 10px;
                  padding-top: 15px;
                "
              >
                <h4 style="font-size: 12px">[公告]</h4>
                <span style="font-size: 12px; padding-left: 5px"
                  >备战开学季 全民半价购数码</span
                >
              </div>

              <div
                style="
                  display: flex;
                  align-items: center;
                  height: 10px;
                  padding-top: 15px;
                "
              >
                <h4 style="font-size: 12px">[特惠]</h4>
                <span style="font-size: 12px; padding-left: 5px"
                  >备战开学季 全民半价购数码</span
                >
              </div>
            </div>

            <!-- 图标 -->
            <div>
              <!-- 第一排 -->
              <div style="padding-top: 15px; display: flex; flex-wrap: wrap">
                <div
                  style="flex: 0 0 25%"
                  v-for="(item, index) in iconList"
                  :key="index"
                >
                  <div class="goods_icon" style="">
                    <img
                      style="width: 30px; height: 30px"
                      :src="item.url"
                      alt=""
                    />
                    <div style="font-size: 14px; padding-top: 2px">
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右边最下面图片 -->
             <div>
              <img src="@/static/home/ad1.png" alt="">
             </div>

          </div>
        </div>
      </div>

     <!-- 今日推荐 -->
      <div style="">
      <Today></Today>
      <Likes></Likes>
     </div>

    </div>

  </div>
</template>

<script>
import Today from '../goos/todays/index.vue'
import Likes from '../goos/likes/index.vue'
export default {
  name: 'goods',
  components: {
    Today,
    Likes
  },
  data () {
    return {
      // 轮播图图片
      banners: [

        require('@/static/home/lun_1.png'),
        require('@/static/home/lun_2.png')

      ],

      // 右侧logo
      iconList: [
        { url: require('@/static/ali_icon/huafei.png'), name: '话费' },
        { url: require('@/static/ali_icon/jipiao.png'), name: '机票' },
        { url: require('@/static/ali_icon/dianyingpiao.png'), name: '电影票' },
        { url: require('@/static/ali_icon/youxi.png'), name: '游戏' },
        { url: require('@/static/ali_icon/caipiao.png'), name: '彩票' },
        { url: require('@/static/ali_icon/jiayouzhan.png'), name: '加油站' },
        { url: require('@/static/ali_icon/jiudian.png'), name: '酒店' },
        { url: require('@/static/ali_icon/huochepiao.png'), name: '火车票' },
        { url: require('@/static/ali_icon/shoufei.png'), name: '众筹' },
        { url: require('@/static/ali_icon/qian.png'), name: '理财' },
        { url: require('@/static/ali_icon/qian.png'), name: '礼品卡' },
        { url: require('@/static/ali_icon/qian.png'), name: '白条' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.goods {
  width: 1100px;
  margin-left: 168px;
  padding-top: 20px;
}

.goodes_top_ul {
  display: flex;
  gap: 35px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.goods_line {
  width: 100%;
  padding-top: 10px;
  border-bottom: 2px solid #c91424;
}

.goods_aside {
  background-color: #c91724;

  width: 220px;
  height: 460px;
}
.goods_aside_ul {
  color: white;

}
.goods_aside_ul li {
  padding: 5px 25px; /* 上下间距8px，左右间距0 */

  font-size: 14px;
  a:hover {
    color: #51b2f1; /* 悬停时红色 */
  }
}

// 轮播图
.goods_main {
  padding: 5px;
  overflow: hidden; /* 防止内容溢出 */
}

.goods_main_el-carousel {
  width: 620px;
  height: 450px;
}

/* 确保轮播项继承高度 */
/deep/ .el-carousel__item {
  height: 100%;
}

/* 图片容器样式 */
.carousel-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 图片自适应样式 */
.full-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键属性 */
  object-position: center; /* 图片居中 */
}
// 阿里图标
.goods_icon {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 61px;
  text-align: center;
  margin-right: -1px;
  padding-top: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid #ccc;
}
</style>
